<!--
 * @Description: 登录页 
 * @Author: wangqi
 * @Date: 2022-04-19 10:29:28
 * @LastEditTime: 2022-05-20 19:12:07
-->
<template>
  <div class="login">
    <a-form :model="state.formInline" class="login-form">
      <a-form-item name="username" :rules="[{ required: true, message: '请输入用户!' }]">
        <a-input v-model:value="state.formInline.username" placeholder="rootadmin">
          <template #prefix> <UserOutlined class="site-form-item-icon" /> </template>
        </a-input>
      </a-form-item>

      <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
        <a-input v-model:value="state.formInline.password" type="password" placeholder="123456">
          <template #prefix> <LockOutlined class="site-form-item-icon" /> </template>
        </a-input>
      </a-form-item>

      <a-form-item name="verifyCode" :rules="[{ required: true, message: '请输入验证码' }]">
        <a-input
          v-model:value="state.formInline.verifyCode"
          placeholder="验证码"
          :maxlength="4"
          size="large"
        >
          <template #prefix><SafetyOutlined /></template>
          <template #suffix>
            <img
              :src="state.captcha"
              class="absolute right-0 h-full cursor-pointer"
              @click="setCaptcha"
            />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" html-type="submit" @click="login">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import { reactive, nextTick } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue';

  import { message, Modal } from 'ant-design-vue';
  import { getImageCaptcha } from '@/api/login';
  import { useUserStore } from '@/store/modules/user';
  defineOptions({ name: 'Login' });

  interface FormInline {
    username: string;
    password: string;
    verifyCode: string;
    captchaId: string;
  }

  const formInline: FormInline = {
    username: '',
    password: '',
    verifyCode: '',
    captchaId: '',
  };

  const state = reactive({
    loading: false,
    captcha: '',
    formInline,
  });

  const route = useRoute();
  const router = useRouter();
  const useStore = useUserStore();

  // 登录
  const login = async () => {
    const { username, password, verifyCode } = state.formInline;
    console.log(username, password, verifyCode);
    if (username.trim() == '' || password.trim() == '') {
      return message.warning('用户名或密码不能为空！');
    }
    if (!verifyCode) {
      return message.warning('验证码不能为空！');
    }
    message.loading('登录中...', 0);

    try {
      await useStore.login(state.formInline).finally(() => {
        message.destroy();
      });
      message.success('登录成功...');
      // FIXME 路由import /** **/注释作用
      // FIXME 基础css样式配置

      nextTick(() => router.replace((route.query.redirect as string) ?? '/'));

      // router.push({ path: '/dashboard' });
    } catch (error: any) {
      Modal.info({
        title: '登录信息',
        content: `${error.message}`,
      });
    }
  };

  // 验证码操作
  const setCaptcha = async () => {
    const { id, img } = await getImageCaptcha({ width: 100, height: 50 });
    state.captcha = img;
    state.formInline.captchaId = id;
  };
  setCaptcha();
</script>

<style lang="less" scoped>
  .login {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: url('@/assets/login.svg');
    background-size: 100%;
    padding-top: 300px;

    .ant-form {
      width: 400px;
      .ant-input-affix-wrapper {
        height: 40px;
      }
      .ant-btn {
        width: 100%;
        height: 40px;
      }
    }
  }
</style>
